<template>
    <div style="display: inline-block;">
        <div class="mainDiv" @click="checked">
            <svg style="width: 1.5em;height: 1.5em;" viewBox="0 0 16 16">
                <circle cx="8" cy="8" r="5" fill="none" :stroke="disable?'var(--disable-color)':'var(--primary-color)'" stroke-width="0.5" />
                <circle v-if="!disable && value == checkedValue" cx="8" cy="8" r="2.5" fill="var(--primary-color)" stroke="none"/>
            </svg>
            <div class="label" :style="disable?'color:var(--disable-color)':''">{{ label }}</div>
        </div>
    </div>    
</template>

<script>

export default {
    data(){
        return{}
    },
    props: {
        value:{},
        checkedValue:{},
        label:{
            type: String,
            default: ''
        },
        disable:{
            type: Boolean,
            default: false
        }
    },
    methods:{
        checked(){
            if(this.disable){
                return;
            }
            this.$emit('update:value',this.checkedValue)
        }
    }
}
</script>

<style>
*{
    --disable-color: var(--theme-disable-color,#b2b3b4) ;
}
.mainDiv{
    display:flex;
    flex-direction: row;
    align-items: center;
    cursor: pointer;
}
.label{
    user-select:none;
    display: inline;
    color: var(--theme-text-color);
}
</style>